<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布课程</title>
  <link rel="stylesheet" href="./CSS/addCourse.css">
</head>

<body>
  <div id="app">
    <div class="head">
      <div class="container" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>

          <div class="backTocourse" @click="backToRace()">
            返回首页
          </div>
        </div>

        <div class="userBox">
          <div class="userImage">
            <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{userMsg.username}}
          </div>
        </div>
      </div>
    </div>

    <div class="container2">
      <div class="title">
        <p class="huaxian"></p>
        <p class="titleText">基本信息</p>
        <p class="huaxian"></p>
      </div>

      <p style="    color: #666">课程名字</p>
      <input type="text" class="courseNameIn" placeholder="填写课程名称" v-model="courseName">

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">售价 <span
          style="font-size: 12px;color:rgb(221, 218, 218);">单位:人民币</span></p>
      <input type="text" class="coursePay" placeholder="填写金额" v-model="coursePay">

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">课程描述</p>
      <textarea cols="100" rows="15" v-model="courseDes"></textarea>

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">上传封面</p>
      <div class="shangchuanimage">
        <input type="file" accept=".png,.jdp" class="imageUploadinput" @change="getImageUrl($event)">
        <div>
          <button class="imageUpload">上传封面</button><br>
          <button class="savePic">保存图片</button>
        </div>
        <div class="showImage">
          <img :src="showimageUrl" alt="./image/noimage.jpg" style="width: 100%;height: 100%;">
        </div>

      </div>

      <div class="button">
        <button class="fabuCourse" @click="publishCourse">发布课程</button>
      </div>
    </div>
  </div>


  <div class="footer"></div>

  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',

      created(){
         const getUser = JSON.parse(sessionStorage.getItem("user"))

        if(getUser==null){
          location.href="login.html"
        }

        else {
          this.userMsg = getUser
        }
      },
      data: {
        showimageUrl: './image/noimage.jpg',

        // 输入金额
        courseName:'',
        courseDes:'',
        coursePay:0,
        imaeUpload:null,
        userMsg:{}
      },
      methods: {

        publishCourse(){
            const zhengze = /^\d{1,}$/

            if(this.courseName==''||this.courseDes==''||zhengze.test(this.coursePay)==false||parseInt(this.coursePay)==0||this.imaeUpload==null){
              alert("输入有误")
            }
            else {
              const formdata = new FormData()
              formdata.append('files', this.imaeUpload)
              axios({
                method: "post",
                url:'/Indenture/course/updateUrl',
                headers:{
                  'Content-Type': 'multipart/form-data'
                },
                data: formdata,
              }).then((res)=>{

                console.log(res.url)
                axios({
                  method: "post",
                  url:'/Indenture/subjectInsert',
                  data: {
                    sname:this.courseName,
                    price:this.coursePay,
                    uid:this.userMsg.uid,
                    desc:this.courseDes,
                    surl:res.data.url
                  },
                }).then((res2)=>{
                  console.log(res2.data)
                  if(res2.data.statue==1){
                    alert("添加成功")
                    location.href="./curriculum.html"
                  }
                  else {
                    alert("添加失败")
                  }
                })
              })
            }

            },


            // }
        async getImageUrl(event) {

          const file = event.target.files[0]
          console.log(file)
          const base64Str = await this.changeFileIntoBase64(file);
          this.showimageUrl = base64Str
          console.log(base64Str)
          this.imaeUpload = file
        },

        changeFileIntoBase64(file) {
          return new Promise((resolve, reject) => {
            const fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = (result) => {
              const base64Str = result.currentTarget.result;
              resolve(base64Str);
            };
          });
        }

      }
    })
  </script>
</body>

</html>